<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/main.css">
    <title>高德地图</title>
</head>
<body>
    <div class="title">
        <h1>拱墅区十大基础教育集团布局图</h1>
    </div>
    <div class="map" id="map"></div>
    <div class="guide" id="guide">
        <button class="guideBtn">展开集团列表</button>
        <div class="groups">
        </div>
        <div class="schools">
        </div>
    </div>

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=104960704b4016ba26b926b9a8cfaa0a"></script> 
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $.ajax({
            url: 'js/data.json',
            type: 'GET',
            dataType: 'JSON',
            success: function(data){
                for (let i = 0; i < data.length; i++) {
                    const group = data[i];
                    let index = i;
                    var groupItem = creatItem(group,"groupItem",index);
                    const schools = data[i].school;
                    for (let j = 0; j < schools.length; j++) {
                        const school = schools[j];
                        var schoolItem = creatItem(school,"schoolItem",index);
                        createMarker(school,group);
                    }
                }
                $('.schools').on('click','.schoolItem',data,schoolHandle);
            }
        })
        
        //定义行政区域
        var city = '拱墅区';
        //定义地图缩放比例
        var iZoom = 13;
        //移动端判断
        let isMobile = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);
        
        if(isMobile) {
            iZoom = 12;
        }

        //地图初始化
        var map = new AMap.Map('map',{
            viewMode: '3D',
            mapStyle: 'amap://styles/41a39c02dd4b24b03c1bc489534ccf10'
        });
        
        
        
        //覆盖物Marker
        var mIndex = 0;
        function createMarker(item,parent){
            mIndex += 1;
            var markerContent = '<div class="myIcon" style="box-shadow: 0px 0px 5px 5px '+parent.color+'"><i style="background-image: url('+item.icon+')"></i></div>'+
            '<div class="myText" style="display: none">'+'<p>'+parent.name+'</p>'+'<p>'+item.name+'</p>'+'</div>';
            var marker = new AMap.Marker({
                position: new AMap.LngLat(item.lat,item.lng),
                content: markerContent,
                title: item.name,
                offset: new AMap.Pixel(-10,-10),
                zIndex: mIndex
            });
            var infoWindow = new AMap.InfoWindow({
                isCustom: true,
                content: infoContent(item),
                offset: new AMap.Pixel(0, -10),
                showShadow: true
            })
            //覆盖物Marker点击事件
            AMap.event.addListener(marker,'click',function(){
                var mActive = infoWindow.getContent().querySelector('.mContentBody ');
                mActive.classList.add('active');
                guideHide();
                infoWindow.open(map,marker.getPosition());
            })
            map.add(marker);
        }
        //地图放大缩小事件
        var zIcon = 10;
        AMap.event.addListener(map,'zoomchange',function(){
            var mZoom = map.getZoom();
            
            if(mZoom > 16){
                $('.myIcon').animate({width:'30px',height:'30px'});
                $('.myText').css({display:'block'});
            }else{
                console.log(mZoom + ' | ' + zIcon);
                $('.myIcon').animate({width: zIcon+'px',height: zIcon+'px'});
                $('.myText').css({display:'none'});
                zIcon = 20 * (mZoom/16);
            }
        })
        //地图点击事件
        AMap.event.addListener(map,'click',function(){
            guideHide();
        })
        
        function infoContent(item){
            var mContent = '';
            // localRange   户籍儿童教育服务区
            // fieldRange   随迁子女教育服务区
            // rise         直升小学
            // tips         温馨提示
            // phone        电话
            // images       学校区域图

            if(item.image != ''){
                mContent += '<div class="mContentHead" onclick="mFn()">学校区域图</div>' + 
                '<div class="mContentBody"><img src="'+item.image+'"/></div>'
            }
            if(item.localRange != ''){
                mContent += '<div class="mContentHead" onclick="mFn()">户籍儿童教育服务区</div>' + 
                '<div class="mContentBody">'+item.localRange+'</div>'
            }
            if(item.fieldRange != ''){
                mContent += '<div class="mContentHead" onclick="mFn()">随迁子女教育服务区</div>' + 
                '<div class="mContentBody">'+item.fieldRange+'</div>'
            }
            if(item.rise != ''){
                mContent += '<div class="mContentHead" onclick="mFn()">直升小学</div>' + 
                '<div class="mContentBody">'+item.rise+'</div>'
            }
            if(item.phone != ''){
                mContent += '<div class="mContentHead" onclick="mFn()">电话</div>' + 
                '<div class="mContentBody">'+item.phone+'</div>'
            }
            mContent += '<div class="mContentHead" onclick="mFn()">温馨提示</div>' + 
            '<div class="mContentBody">报名请携带报名材料：房产证及复印件、户口簿及复印件、预防接种卡！</div>'
            var info = document.createElement('div');
            info.className = 'mBox';
            
            var head = document.createElement('div');
            var title = document.createElement('div');
            var close = document.createElement('span');
            var videoUrl = document.createElement('a');

            head.className = 'mHead';
            title.className = 'mTitle';
            close.className = 'mClose';
            close.innerText = '×';
            var mTitleAll = '<span>'+item.name+'</span>';
            if(item.content != ''){
                mTitleAll += '<a href="'+item.content+'" target="_blank" class="mHref">视频链接</a>'
            }
            title.innerHTML = mTitleAll;
            close.onclick = closeInfoWindow;

            head.appendChild(title);
            head.appendChild(close);
            info.appendChild(head);

            var body = document.createElement('div');

            body.className = 'mBody';
            body.innerHTML = mContent;
            info.appendChild(body);

            var foot = document.createElement('div');
            foot.className = 'mFoot';
            info.appendChild(foot);

            return info;
        }
        //信息窗口关闭
        function closeInfoWindow() {
            map.clearInfoWindow();
        }
        //信息窗口栏目切换
        function mFn(){
            var event = window.event;
            var target = event.target;
            $('.mContentBody').removeClass('active');
            $(target).next('.mContentBody').addClass('active');
        }
        //引导层条目添加
        var creatItem = function(item,itemClass,index){
            var guideItem = '<div class='+itemClass+' style="background-image: url('+item.icon+')">'+item.name+'</div>';
            var school = '<div class="school"></div>';
            if(itemClass == "groupItem"){
                $('.groups').append(guideItem);
                $('.schools').append(school);
            }else{
                $('.school').eq(index).append(guideItem);
            }
        }
        //集团点击
        $('.groups').on('click','.groupItem',function(){
            var n = $(this).index();
            $('.guide').removeClass('groupActive').addClass('schoolActive');
            $('.guideBtn').text('返回集团列表');
            $('.guide').animate({height: $('.school').eq(n).height()+40+'px'});
            $('.groups').animate({opacity: '0',zIndex: '0'});
            $('.schools').animate({opacity: '1',zIndex: '1'});
            $('.school').eq(n).show().siblings().hide();
        })
        //返回按钮点击
        $('.guideBtn').on('click',function(){
            if($('.guide').hasClass('schoolActive')){
                $('.guide').removeClass('schoolActive').addClass('groupActive');
                $('.guide').animate({height: $('.groups').height()+40+'px'});
                $('.groups').animate({opacity: '1',zIndex: '1'});
                $('.schools').animate({opacity: '0',zIndex: '0'});
                this.innerText = '收起集团列表';
            }else{
                if($('.guide').hasClass('groupActive')){
                    $('.guide').removeClass('groupActive');
                    $('.guide').animate({height: '40px'});
                    $('.groups').animate({opacity: '1',zIndex: '1'});
                    $('.schools').animate({opacity: '0',zIndex: '0'});
                    this.innerText = '展开集团列表';
                }else{
                    $('.guide').addClass('groupActive');
                    $('.guide').animate({height: $('.groups').height()+40+'px'});
                    $('.groups').animate({opacity: '1',zIndex: '1'});
                    $('.schools').animate({opacity: '0',zIndex: '0'});
                    this.innerText = '收起集团列表';
                }
            }
        })

        //学校点击
        
        function schoolHandle(e){
            var pIndex = $(this).parent().index();
            var cIndex = $(this).index();
            var data = e.data[pIndex].school[cIndex];
            map.setZoomAndCenter(19,new AMap.LngLat(data.lat,data.lng));
            guideHide();
        }
        // 引导层隐藏
        function guideHide(){
            $('.guide').removeClass('schoolActive','groupActive');
            $('.guide').animate({height: '40px'});
            $('.groups').animate({opacity: '1',zIndex: '1'});
            $('.schools').animate({opacity: '0',zIndex: '0'});
            $('.guideBtn').text('展开集团列表');
        }

        
        

        //地图插件使用
        //AMap.DistrictSearch - 行政区域查询
        AMap.plugin(['AMap.DistrictSearch','AMap.ToolBar'],function(){
            var district = new AMap.DistrictSearch({
                //查询等级 - country:国家, province:省, city:市, district:区/县, biz_area:商圈
                level: 'district',
                //返回行政区的坐标点集合 - 默认值:base:不返回坐标点, all:返回坐标点
                extensions: 'all'
            });
            //district.search() 根据关键字查询行政区或商圈信息
            district.search(city,function(status,result){
                var bounds = result.districtList[0].boundaries;
                var polygons = [];
                if(bounds){
                    for (let i = 0; i < bounds.length; i++) {
                        const boundsEle = bounds[i];
                        var polygon = new AMap.Polygon({
                            map: map,
                            strokeWeight: 1,
                            path: boundsEle,
                            fillOpacity: 0.5,
                            fillColor: '#000000',
                            strokeColor: '#ff0000',
                            strokeStyle: 'dashed'
                        });
                        polygons.push(polygon);
                    }
                }
                map.setCity(city,function(){
                    map.setFitView();
                    map.setZoom(iZoom);
                });
            });
            var toolbar = new AMap.ToolBar({
                position: 'RB'
            });
            map.addControl(toolbar);
        })
    </script>
</body>
</html>